<template>
  <div>
    <el-row class="el-top">
      <el-col :span="24" class="tag">
        <i class="el-icon-edit"> </i>
        <span>筛选信息:</span>
        <span
          :class="{ active: index == isActive }"
          v-for="(item, index) in arr.programmerlearn"
          :key="index"
          @click="showdifference(index)"
          >{{ item.major }}</span
        >
      </el-col>
      <!-- <el-col :span="24" class="tag span-btn">
        <div class="btn-one">
          <i class="el-icon-help"> </i>
          <span>排序:</span>
        </div>
        <div class="btn-two">
          <el-button-group>
            <el-button
              type="primary"
              native-type="button"
              v-for="(item, index) in arr.computertitle"
              :key="index"
              @click="switchtabs(index)"
              class="clearfix"
              :class="{ active: index === curId }"
              >{{ item.title }}</el-button
            >
          </el-button-group>
        </div>
      </el-col> -->
    </el-row>
    <div class="conten" v-for="(item,index) in arr.programmertabs" :key="index" v-show="index===curId"> 
      <div
        class="conten-cont" v-for="(item,index) in item.tabsname" :key="index"
      >
        <div class="horizontal">
          <div class="heigth-left">
            <span class="one">{{item.headline}}</span>
            <span>{{item.introduction}}</span>
          </div>
          <div class="heigth-right">
            <img :src="item.img" alt="" />
          </div>
          <div class="content-btn"  >
            <span v-for="(item, index) in item.name" :key="index">{{item.itemname}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vComponent from "@/components/component.vue";
///////获取模拟的json数据
import { fetchData } from "@/api/index";
export default {
  name: "计算机操作系统",
  components: {
    vComponent,
  },
  data() {
    return {
      curId: 0,
      arr: [], /////把json数据存到数组里面
      isActive: "",
      search: "",
      username: "",
      name: localStorage.getItem("username"),
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      fetchData().then((res) => {
        console.log(res);
        // const arr=JSON.parse(res);
        // console.log(arr);
        this.arr = res;
        // this.pageTotal = res.pageTotal || 50;
      });
    },
    /////点击文字变色
    showdifference(index) {
      this.isActive = index;
      console.log(this.isActive);
    },
    // ////////////切换选项卡
    // switchtabs(index) {
    //   //实现选项卡切换操作：本质就是操作类名
    //   this.curId = index;
    // },
  },
};
</script>

<style  lang="less" scoped>
//////////选项卡操作
.clearfix {
  zoom: 1;
}
.clearfix:after {
  display: block;
  content: "";
  clear: both;
}
.el-top {
  width: 100%;
  background: #fff;
  line-height: 50px;
  margin-top: 20px;
}
.tag {
  padding-left: 50px;
}
.tag span {
  margin-right: 26px;
  padding: 0 8px;
  cursor: pointer;
}
/* 显示样式 */
.active {
  border-radius: 5%;
  background-color: #1890ff;
  color: #fff;
}

.btn-one {
  float: left;
  width: 90px;
  height: 50px;
}
.btn-one span {
  margin-right: 20px;
}
.btn-two {
  float: left;
  width: 400px;
  height: 50px;
}
.span-btn .btn {
  display: inline-block;
  width: 50px;
  height: 20px;
  border: #1890ff solid 1px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  /* border-radius: 4px; */
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-row {
  margin-top: 20px;
}
.heigth {
  width: 340px;
}
.heigth-left {
  float: right;
  width: 200px;
  height: 120px;
}
.heigth-left span {
  display: block;
  font-size: 12px;
}
.heigth-left .one {
  height: 50px;
  font-size: 14px;
  font-weight: 600;
  line-height: 50px;
}
.heigth-right {
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.heigth-right img {
  width: 100px;
  height: 100px;
}
.content-btn {
 margin-top: 30px;
  width: 100%;
  height: auto;
  text-align: center;
}
.content-btn span {
  display: block;
  float: right;
  cursor: pointer;
  margin: 15px 8px 0 0;
  padding: 0 7px;
  background: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
}
.conten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  height: auto;
}

.conten-cont {
  margin: 20px 0px 0px;
  width: 330px;
  height: 230px;
  background-color: #fff;
}
</style>
